<template>
  <el-container>
    <div class="left-silder">
      <my-slider :isCollapse="isCollapse"></my-slider>
    </div>
    <div class="right-main">
      <my-header @collapseFun="handelCollapse"></my-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </div>
  </el-container>
</template>

<script>
  import myHeader from '@/components/layout/header.vue';
  import mySlider from '@/components/layout/slider.vue';
    export default {
        data(){
          // const item = {
          //   date: '2019-07-22',
          //   name: '王明',
          //   address: '北京市海淀区中关村大厦'
          // };
          return{
            // tableData: Array(20).fill(item)
            isCollapse: true,
          }
        },
      methods:{
          handelCollapse(val){
            this.isCollapse = val;
          }
      },
        //挂在组件
        components:{
          myHeader,mySlider
        }
    };
</script>

<style scoped lang="scss">
  .el-container{
    position: absolute;
    left: 0;
    top: 0;
    /*底部，最下部*/
    bottom: 0;
    right: 0;
    /*当内容溢出元素框时发生的事情*/
    overflow: hidden;
    /*规定元素应该生成的框的类型。*/
    display: flex;
    .left-silder{
      width: auto;
    }
    .right-main{
      /*布局*/
      flex: 1;
      position: relative;
      .el-main{
        height: 100%;
        overflow-y: auto;
      }
    }
  }
</style>
